<template>
  <view>
    <customtop top_title="邀请海报"></customtop>
    <view class="container">
      <view class="poster_list">
        <u-swiper
          :list="poster_list"
          keyName="img"
          @change="changeSwiper_poster"
          :autoplay="false"
          circular
          previousMargin="30"
          nextMargin="30"
          height="440"
          imgMode="widthFix"
        >
        </u-swiper>
      </view>
      <view class="description">
        <u-alert type="warning" center="true" description="请选择合适样式生成海报图"></u-alert>
      </view>
      <view class="btns">
        <view class="luckbtn luckbtn-default" @click="createInviteCodeImage">生成海报图</view>
      </view>
    </view>
    <u-popup
      mode="center"
      round="3"
      :show="invite_img_show"
      @close="onClose_invite_img"
    >
      <view class="invite_img">
        <image class="img" :src="invite_img" mode="widthFix" />
        <view class="invite_img_description">长按保存图片</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      config: {},
      loading: true,
      poster_list: [],
      poster_current: 0,
      invite_url: '',
      invite_img: '',
      invite_img_origin: '',
      invite_img_show: false
    }
  },

  onLoad: function() {
    uni.showLoading();
    request.post('/common/getConfig').then(res => {
      uni.hideLoading();
      this.config = res.data;
      this.poster_list = res.data.poster_bg_list;
    })

  },

  methods: {
    createInviteCodeImage: function() {
      let poster = this.poster_list[this.poster_current];
      uni.showLoading({ title: '生成中...' });
      request.post('/account/createInviteCodeImage_h5', {id: poster.id}, {responseType: 'arraybuffer'}).then(res => {
        uni.hideLoading()
        this.invite_img_origin = res;
        this.invite_img = 'data:image/png;base64,' + uni.arrayBufferToBase64(res);
        this.invite_img_show = true;
      })
    },

    saveImage: function() {
      let that = this;
      var imgSrc =  uni.arrayBufferToBase64(that.invite_img_origin);
      var save = uni.getFileSystemManager();
      var number = Math.random();
      var filePath = wx.env.USER_DATA_PATH + '/pic' + number + '.png';
      save.writeFile({
        filePath: filePath,
        data: imgSrc,
        encoding: 'base64',
        success: res => {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success(res) {
              uni.showToast({
               title: '保存成功',
               mask: true
              });
              that.invite_img_show = false;
            },
            fail(res) {
              uni.showToast({
               title: '保存失败',
               icon: 'error',
               mask: true
              });
            }
          })
        },
        fail(res) {
          console.error(res)
        }
      })
    },

    onClose_invite_img() {
      this.invite_img_show = false;
    },

    changeSwiper_poster: function(e) {
      this.poster_current = e.current;
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
page {
  padding-bottom: 30rpx;
}
.poster_list {
  margin-top: 50rpx;
}
.description {
  margin-top: 50rpx;
  margin-bottom: 30rpx;
}

.invite_btn .msg {
  margin-bottom: 10px;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
.invite_img {
  width: 690rpx;
}
.invite_img .img {
  width: 690rpx;
}
.invite_img_description {
  text-align: center;
  height: 42px;
  line-height: 42px;
  color: #666;
  font-size: 12px;
}
.popup_custom_class {
  background-color: rgba(255,255,255,0) !important;
}
</style>
